<template>
	<view>
		<!-- 顶部开始搜索区域 -->
		<view class="header">
			<view class="search-con">
				<view class="category">
					<view class="iconfont icon-fenlei"></view>
					<text>分类</text>
				</view>
				<view class="search">
					<view class="iconfont icon-search"></view>
					<!-- <input class="uni-input" placeholder="搜索想要的商品" /> -->
					<text>搜索想要的商品</text>
				</view>
				<view class="shopping-bag">
					<view class="iconfont icon-goods"></view>
					<text>购物袋</text>
				</view>
			</view>
			<!-- 轮播图 -->
			<view class="swiper-con">
				<swiper class="swiper" :indicator-dots="true" :autoplay="false" :interval="2000" :duration="500" :circular="true">
					<swiper-item class="name">
						<image src="https://oss.laiba.shop/system/NewShop/swiper01.jpg" mode=""></image>
					</swiper-item>
					<swiper-item class="name">
						<image src="https://oss.laiba.shop/system/NewShop/swiper01.jpg" mode=""></image>
					</swiper-item>
					<swiper-item class="name">
						<image src="https://oss.laiba.shop/system/NewShop/swiper01.jpg" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 服务开始 -->
		<view class="service">
			<view class="service-name">
				<view class="self"></view>
				<view>爸妈自营</view>
			</view>
			<view class="service-name">
				<view class="self"></view>
				<view>假一赔十</view>
			</view>
			<view class="service-name">
				<view class="self"></view>
				<view>低价保障</view>
			</view>
			<view class="service-name">
				<view class="self"></view>
				<view class="common">售后无忧</view>
			</view>
		</view>
		<!-- 分类列表 -->
		<view class="category-con">
			<view class="top">
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category01.png" mode=""></image>
					<text>营养辅食</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category02.png" mode=""></image>
					<text>进口奶粉</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category03.png" mode=""></image>
					<text>婴儿用品</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category04.png" mode=""></image>
					<text>纸尿裤</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category05.png" mode=""></image>
					<text>童书玩具</text>
				</view>
			</view>
			<view class="top bottom">
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category06.png" mode=""></image>
					<text>美妆护肤</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category07.png" mode=""></image>
					<text>营养保健</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category08.png" mode=""></image>
					<text>个人护理</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category09.png" mode=""></image>
					<text>休闲食品</text>
				</view>
				<view>
					<image src="https://oss.laiba.shop/system/NewShop/category10.png" mode=""></image>
					<text>星选酒店</text>
				</view>
			</view>
		</view>
		<!-- 优惠券开始 -->
		<view class="coupon-con">
			<text>新人专属惊喜</text>
			<image src="https://oss.laiba.shop/system/NewShop/coupon5.jpg" mode="" class="coupon_five"></image>
			<image src="https://oss.laiba.shop/system/NewShop/special_price.jpg" mode="" class="special_price"></image>
		</view>
		<!-- 低价好物 -->
		<view class="cheap-goods">
			<view class="title">
				<text>低价好物</text>
				<text>更多</text>
			</view>
			<view class="goods-con">
				<view class="goods">
					<image src="../../static/huodong_active.png" mode=""></image>
					<text class="goods-title">美国雀巢美国美国雀巢美国美国雀巢美国美国雀巢美国</text>
					<view class="goods-price">
						<text>¥19</text>
						<text>¥19</text>
					</view>
				</view>
				<view class="goods">
					<image src="../../static/huodong_active.png" mode=""></image>
					<text class="goods-title">美国雀巢美国美国雀巢美国美国雀巢美国美国雀巢美国</text>
					<view class="goods-price">
						<text>¥19</text>
						<text>¥19</text>
					</view>
				</view>
				<view class="goods">
					<image src="../../static/huodong_active.png" mode=""></image>
					<text class="goods-title">美国雀巢美国美国雀巢美国美国雀巢美国美国雀巢美国</text>
					<view class="goods-price">
						<text>¥19</text>
						<text>¥19</text>
					</view>
				</view>
				<view class="goods">
					<image src="../../static/huodong_active.png" mode=""></image>
					<text class="goods-title">美国雀巢美国美国雀巢美国美国雀巢美国美国雀巢美国</text>
					<view class="goods-price">
						<text>¥19</text>
						<text>¥19</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 24小时热卖排行 -->
		<view class="hot-con">
			<view class="title">
				<text>24小时热卖排行</text>
				<text>1/3</text>
			</view>
			<!-- 热卖轮播图 -->
			<view class="hot-swiper-con">
				<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="2000" :duration="500" :circular="true">
					<swiper-item class="hot-list-con">
						<image src="https://oss.laiba.shop/system/NewShop/hot_baby.png" mode="" class="title-img"></image>
						<view class="hot-list">
							<view class="hot-list-one">
								<view class="left">1</view>
								<view class="right">
									<image src="../../static/huodong_active.png" mode=""></image>
									<view class="hot-list-info">
										<text class="product">荷兰原装进口幼儿配方奶荷兰原装进口幼儿配方奶</text>
										<view class="hot-list-price">
											<text>￥479</text>
											<text>￥589</text>
										</view>
									</view>
									<view class="shop-icon">
										<view class="iconfont icon-goods"></view>
									</view>
								</view>
							</view>
							<view class="hot-list-one">
								<view class="left">1</view>
								<view class="right">
									<image src="../../static/huodong_active.png" mode=""></image>
									<view class="hot-list-info">
										<text class="product">荷兰原装进口幼儿配方奶荷兰原装进口幼儿配方奶</text>
										<view class="hot-list-price">
											<text>￥479</text>
											<text>￥589</text>
										</view>
									</view>
									<view class="shop-icon">
										<view class="iconfont icon-goods"></view>
									</view>
								</view>
							</view>
							<view class="hot-list-one">
								<view class="left">1</view>
								<view class="right">
									<image src="../../static/huodong_active.png" mode=""></image>
									<view class="hot-list-info">
										<text class="product">荷兰原装进口幼儿配方奶荷兰原装进口幼儿配方奶</text>
										<view class="hot-list-price">
											<text>￥479</text>
											<text>￥589</text>
										</view>
									</view>
									<view class="shop-icon">
										<view class="iconfont icon-goods"></view>
									</view>
								</view>
							</view>
							<view class="hot-list-one">
								<view class="left">4</view>
								<view class="right">
									<image src="../../static/huodong_active.png" mode=""></image>
									<view class="hot-list-info">
										<text class="product">荷兰原装进口幼儿配方奶荷兰原装进口幼儿配方奶</text>
										<view class="hot-list-price">
											<text>￥479</text>
											<text>￥589</text>
										</view>
									</view>
									<view class="shop-icon">
										<view class="iconfont icon-goods"></view>
									</view>
								</view>
							</view>
							<view class="hot-list-one">
								<view class="left">5</view>
								<view class="right">
									<image src="../../static/huodong_active.png" mode=""></image>
									<view class="hot-list-info">
										<text class="product">荷兰原装进口幼儿配方奶荷兰原装进口幼儿配方奶</text>
										<view class="hot-list-price">
											<text>￥479</text>
											<text>￥589</text>
										</view>
									</view>
									<view class="shop-icon">
										<view class="iconfont icon-goods"></view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
					<swiper-item class="hot-list">
						
					</swiper-item>
					<swiper-item class="hot-list">
						
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 优选榜单 -->
		<view class="sale-top">
			<view class="sale-left">
				<view class="sale-left-top">
					<text>优选榜单</text>
					<text>大家都在买什么</text>
					<view>
						<image src="https://oss.laiba.shop/system/NewShop/top01.png" mode=""></image>
						<image src="https://oss.laiba.shop/system/NewShop/top02.png" mode=""></image>
					</view>
				</view>
				<view class="sale-left-center">
					<view>
						<text>国家馆</text>
						<text>足不出户 逛全球</text>
					</view>
					<view>
						<image src="https://oss.laiba.shop/system/NewShop/top05.png" mode=""></image>
					</view>
				</view>
				<view class="sale-left-bottom">
					<view>
						<text>自营超市</text>
						<text>大牌授权专区</text>
					</view>
					<view class="milk">
						<image src="https://oss.laiba.shop/system/NewShop/top07.png" mode=""></image>
					</view>
				</view>
			</view>
			
			<view class="sale-right">
				<view class="sale-left-top">
					<text>新品首发</text>
					<text>海量新品</text>
					<view>
						<image src="https://oss.laiba.shop/system/NewShop/top03.png" mode=""></image>
						<image src="https://oss.laiba.shop/system/NewShop/top04.png" mode=""></image>
					</view>
				</view>
				<view class="sale-left-center">
					<view>
						<text>品牌馆</text>
						<text>总有钟情的一款</text>
					</view>
					<view style="margin-left: 8rpx;">
						<image src="https://oss.laiba.shop/system/NewShop/top06.png" mode=""></image>
					</view>
				</view>
				<view class="sale-left-bottom">
					<view>
						<text>领券中心</text>
						<text>数券数到手抽筋</text>
					</view>
					<view class="milk" style="margin-left: 6rpx;">
						<image src="https://oss.laiba.shop/system/NewShop/top08.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 某x轴滚动模块 -->
		<view class="scroll-con">
			<image src="https://oss.laiba.shop/system/shop/baby01.jpg" mode="" class="banner-img"></image>
			<scroll-view scroll-x="true" class="scroll-con-goods">
				<view class="scroll-goods">
					<view class="scroll-goods-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/whiteBackground/146886686.JPG" mode=""></image>
						<text class="goods-title">美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢</text>
						<view class="price">
							<text>¥234</text>
							<view class="iconfont icon-goods"></view>
						</view>
					</view>
				</view>
				<view class="scroll-goods">
					<view class="scroll-goods-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/whiteBackground/146886686.JPG" mode=""></image>
						<text class="goods-title">美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢</text>
						<view class="price">
							<text>¥234</text>
							<view class="iconfont icon-goods"></view>
						</view>
					</view>
				</view>
				<view class="scroll-goods">
					<view class="scroll-goods-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/whiteBackground/146886686.JPG" mode=""></image>
						<text class="goods-title">美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢</text>
						<view class="price">
							<text>¥234</text>
							<view class="iconfont icon-goods"></view>
						</view>
					</view>
				</view>
				<view class="scroll-goods">
					<view class="scroll-goods-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/whiteBackground/146886686.JPG" mode=""></image>
						<text class="goods-title">美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢</text>
						<view class="price">
							<text>¥234</text>
							<view class="iconfont icon-goods"></view>
						</view>
					</view>
				</view>
				<view class="scroll-goods">
					<view class="scroll-goods-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/whiteBackground/146886686.JPG" mode=""></image>
						<text class="goods-title">美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢美国雀巢</text>
						<view class="price">
							<text>¥234</text>
							<view class="iconfont icon-goods"></view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="recommend-container">
			<view class="recommend-title">猜你喜欢</view>
			<view class="recommend-list">
				<view class="recommend-item">
					<image src="http://images.houniao.hk/upload/goods/20181115104649969_big.jpg" mode=""></image>
					<view class="recommend-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/origin/CN.JPG" mode=""></image>
						<text>智恩堡 大颗粒拼接环保积木 100粒收纳袋装粒收纳袋装粒收纳袋装粒收纳袋装</text>
					</view>
					<view class="recommend-name">自营</view>
					<view class="recommend-price">
						<text>¥19</text>
						<text>¥16</text>
					</view>
				</view>
				<view class="recommend-item">
					<image src="http://images.houniao.hk/upload/goods/20181115104649969_big.jpg" mode=""></image>
					<view class="recommend-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/origin/CN.JPG" mode=""></image>
						<text>智恩堡 大颗粒拼接环保积木 100粒收纳袋装粒收纳袋装粒收纳袋装粒收纳袋装</text>
					</view>
					<view class="recommend-name">自营</view>
					<view class="recommend-price">
						<text>¥19</text>
						<text>¥16</text>
					</view>
				</view>
				<view class="recommend-item">
					<image src="http://images.houniao.hk/upload/goods/20181115104649969_big.jpg" mode=""></image>
					<view class="recommend-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/origin/CN.JPG" mode=""></image>
						<text>智恩堡 大颗粒拼接环保积木 100粒收纳袋装粒收纳袋装粒收纳袋装粒收纳袋装</text>
					</view>
					<view class="recommend-name">自营</view>
					<view class="recommend-price">
						<text>¥19</text>
						<text>¥16</text>
					</view>
				</view>
				<view class="recommend-item">
					<image src="http://images.houniao.hk/upload/goods/20181115104649969_big.jpg" mode=""></image>
					<view class="recommend-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/origin/CN.JPG" mode=""></image>
						<text>智恩堡 大颗粒拼接环保积木 100粒收纳袋装粒收纳袋装粒收纳袋装粒收纳袋装</text>
					</view>
					<view class="recommend-name">自营</view>
					<view class="recommend-price">
						<text>¥19</text>
						<text>¥16</text>
					</view>
				</view>
				<view class="recommend-item">
					<image src="http://images.houniao.hk/upload/goods/20181115104649969_big.jpg" mode=""></image>
					<view class="recommend-info">
						<image src="http://m.laiba.shop/attachment/images/1/2018/07/origin/CN.JPG" mode=""></image>
						<text>智恩堡 大颗粒拼接环保积木 100粒收纳袋装粒收纳袋装粒收纳袋装粒收纳袋装</text>
					</view>
					<view class="recommend-name">自营</view>
					<view class="recommend-price">
						<text>¥19</text>
						<text>¥16</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				hotList: [
					{
						id: 1,
						title: '逻辑狗',
						price: 168,
						oldPrice: 998
					},
					{
						id: 2,
						title: '【香港直邮】合生元版澳洲斯维斯swisse钙+维生素D钙片 大钙 150片',
						price: 168,
						oldPrice: 998
					},
					{
						id: 3,
						title: '逻辑狗',
						price: 168,
						oldPrice: 998
					},
					{
						id: 4,
						title: '【香港直邮】合生元版澳洲斯维斯swisse钙+维生素D钙片 大钙 150片',
						price: 168,
						oldPrice: 998
					}
				]
			}
		},
		onLoad() {
			
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		background: url(https://oss.laiba.shop/system/NewShop/head_bg.jpg) no-repeat top center;
		background-size: 100%;
		height: 278rpx;
		padding-top: 28rpx;
		.search-con {
			display: flex;
			justify-content: space-around;
			.category,.shopping-bag {
				display: flex;
				flex: 1;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 32rpx;
				color: #fff;
				text {
					font-family: SourceHanSansCN-Normal;
					font-size: 18rpx;
				}
			}
			.category {
				text {
					padding-right: 8rpx;
				}
			}
			.search {
				flex: 4;
				width: 551rpx;
				height: 71rpx;
				background-color: #fff;
				border-radius: 35rpx;
				line-height: 71rpx;
				display: flex;
				padding-left: 31rpx;
				.uni-input,text {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					height: 71rpx;
					padding-left: 13rpx;
					color: #999;
				}
				.icon-search {
					color: #999;
				}
			}
		}
		.swiper-con {
			height: 255rpx;
			background-image: linear-gradient(to bottom, #b4b4b4 , #f4f4f4);
			margin-top: 172rpx;
			position: relative;
			.swiper {
				width: 698rpx;
				height: 372rpx;
				position: absolute;
				left: 0;
				top: -144rpx;
				transform: translateX(26rpx);
				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}
		}
	}
	.service {
		margin-top: 246rpx;
		height: 92rpx;
		background-image: linear-gradient(to bottom, #f4f4f4 , #fff);
		display: flex;
		justify-content: space-around;
		&-name {
			display: flex;
			align-items: center;
			font-family: SourceHanSansCN-Normal;
			font-size: 24rpx;
			color: #666;
			.self {
				background: url(https://oss.laiba.shop/system/NewShop/service.png) no-repeat top center;
				background-size: 100%;
				width: 24rpx;
				height: 27rpx;
				margin-right: 9rpx;
			}
		}
		&-name:nth-child(1) {
			.self {
				margin-left: 9rpx;
			}
		}
		&-name:nth-child(2) {
			.self {
				background-position: 0 -48rpx;
			}
		}
		&-name:nth-child(3) {
			.self {
				background-position: 0 -144rpx;
			}
		}
		&-name:nth-child(4) {
			.self {
				background-position: 0 -96rpx;
			}
			.common {
				margin-right: 9rpx;
			}
		}
		
	}
	.category-con {
		padding: 20rpx 46rpx 0 46rpx;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			view {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
				text {
					font-family: SourceHanSansCN-Light;
					font-size: 20rpx;
					font-weight: bold;
					// color: #2f2f2f;
					color: $shop-category-color;
					padding-top: 17rpx;
				}
			}
		}
		.bottom {
			margin-top: 40rpx;
		}
	}
	.coupon-con {
		margin: 64rpx 26rpx 0 26rpx;
		height: 451rpx;
		border-radius: 10rpx;
		background: url(https://oss.laiba.shop/system/NewShop/coupon_bg.png) no-repeat top center;
		background-size: 100%;
		padding: 10rpx 19rpx 0;
		text {
			font-family: SourceHanSansCN-Medium;
			font-size: 34rpx;
			font-weight: bold;
			color: #fe687f;
			padding-left: 6rpx;
		}
		.coupon_five {
			width: 660rpx;
			height: 117rpx;
			background-color: #ef5476;
			border-radius: 10rpx;
			margin: 14rpx 0 14rpx 0;
		}
		.special_price {
			width: 660rpx;
			height: 210rpx;
			border-radius: 10rpx;
		}
	}
	.cheap-goods {
		margin: 60rpx 0 71rpx 0;
		.title {
			display: flex;
			align-items: center;
			margin-bottom: 28rpx;
			text:nth-child(1) {
				font-family: PingFangSC-Medium;
				font-size: 30rpx;
				color: #1a1a1a;
				font-weight: bold;
				display: flex;
				flex: 1;
				padding-left: 34rpx;
			}
			text:nth-child(2) {
				font-family: PingFangSC-Regular;
				font-size: 25rpx;
				color: #7e7e7e;
				padding-right: 57rpx;
			}
		}
		.goods-con {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 0 26rpx;
			background-color: #f9f9f9;
			border: 1rpx solid #e6e6e6;
			border-radius: 10rpx;
			padding: 31rpx 0 29rpx 0;
			.goods {
				width: 124rpx;
				display: flex;
				flex-direction: column;
				image {
					width: 124rpx;
					height: 124rpx;
					border-radius: 10rpx;
				}
				.goods-title {
					font-family: SourceHanSansCN-Regular;
					font-size: 20rpx;
					line-height: 28rpx;
					color: #191919;
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
				.goods-price {
					text:nth-child(1) {
						font-family: PingFangSC-Medium;
						font-size: 24rpx;
						color: #df0023;
						font-weight: bold;
					}
					text:nth-child(2) {
						font-family: PingFangSC-Regular;
						font-size: 20rpx;
						color: #b2b2b2;
						padding-left: 10rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
	.hot-con {
		padding: 0 26rpx;
		.title {
			display: flex;
			margin-bottom: 31rpx;
			text:nth-child(1) {
				font-family: PingFangSC-Medium;
				font-size: 30rpx;
				color: #1a1a1a;
				font-weight: bold;
				display: flex;
				flex: 1;
				padding-left: 8rpx;
			}
			text:nth-child(2) {
				font-family: PingFangSC-Regular;
				font-size: 25rpx;
				color: #7e7e7e;
				padding-right: 8rpx;
			}
		}
		.hot-swiper-con {
			background-color: #fef9e3;
			border-radius: 20rpx;
			height: 1031rpx;
			.swiper {
				height: 100%;
			}
			.hot-list-con {
				text-align: center;
				.title-img {
					width: 260rpx;
					height: 56rpx;
					border-radius: 28rpx;
					margin: 29rpx 0 25rpx 0;
				}
				.hot-list {
					background-color: #fff;
					border-radius: 10rpx;
					margin: 0 20rpx;
					position: relative;
					.hot-list-one:nth-child(1) .left,.hot-list-one:nth-child(2) .left,.hot-list-one:nth-child(3) .left {
						display: none;
					}
					.hot-list-one:nth-child(1)::before,.hot-list-one:nth-child(2)::before,.hot-list-one:nth-child(3)::before {
						content: '';
						width: 36rpx;
						height: 45rpx;
						background: url(https://oss.laiba.shop/system/shop/hot01.png) no-repeat;
						background-size: 100%;
						position: absolute;
						left: 20rpx;
						top: 60rpx;
					}
					.hot-list-one:nth-child(2)::before {
						content: '';
						width: 36rpx;
						height: 45rpx;
						background: url(https://oss.laiba.shop/system/shop/hot02.png) no-repeat;
						background-size: 100%;
						position: absolute;
						left: 20rpx;
						top: 240rpx;
					}
					.hot-list-one:nth-child(3)::before {
						content: '';
						width: 36rpx;
						height: 45rpx;
						background: url(https://oss.laiba.shop/system/shop/hot03.png) no-repeat;
						background-size: 100%;
						position: absolute;
						left: 20rpx;
						top: 420rpx;
					}
					
					.hot-list-one {
						display: flex;
						height: 180rpx;
						align-items: center;
						.left {
							width: 32rpx;
							height: 32rpx;
							background-color: #fdcd4c;
							border-radius: 50%;
							color: #fff;
							font-size: 20rpx;
							line-height: 32rpx;
							margin: 0 20rpx 0 24rpx;
						}
						.right {
							display: flex;
							align-items: center;
							border-bottom: 1rpx solid #e6e6e6;
							margin-left: 75rpx;
							height: 100%;
							image {
								width: 120rpx;
								height: 120rpx;
								border-radius: 4rpx;
								background-color: #fdde4c;
							}
							.hot-list-info {
								display: flex;
								flex-direction: column;
								width: 365rpx;
								margin-left: 30rpx;
								line-height: 70rpx;
								.product {
									display: inline-block;
									width: 100%;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									font-family: SourceHanSansCN-Regular;
									font-size: 28rpx;
									color: #1a1a1a;
								}
								.hot-list-price {
									text-align: left;
									font-family: PingFangSC-Medium;
									font-size: 32rpx;
									color: #e00b2c;
									text:nth-child(2) {
										font-family: SourceHanSansCN-Normal;
										font-size: 24rpx;
										color: #999;
										text-decoration: line-through;
										padding-left: 12rpx;
									}
								}
							}
							.shop-icon {
								display: flex;
								align-self: flex-end;
								margin-bottom: 30rpx;
								width: 50rpx;
								height: 50rpx;
								background-color: #e00b2c;
								border-radius: 50%;
								justify-content: center;
								align-items: center;
								.iconfont {
									font-size: 24rpx;
									color: #fff;
								}
							}
						}
					}
					.hot-list-one:nth-child(4) .right,.hot-list-one:nth-child(5) .right {
						margin-left: 0;
					}
					.hot-list-one:nth-child(5) .right {
						border-bottom: none;
					}
				}
				
			}
			
		}
	}
	.sale-top {
		margin: 40rpx 30rpx 0;
		height: 589rpx;
		background-color: #fff;
		border-radius: 10rpx;
		display: flex;
		border: 1rpx solid #e6e6e6;
		background-color: #fafafa;
		.sale-left,.sale-right {
			width: 50%;
		}
		.sale-left,.sale-right {
			border-right: 1rpx solid #e6e6e6;
			.sale-left-top {
				border-bottom: 1rpx solid #e6e6e6;
				display: flex;
				flex-direction: column;
				padding: 20rpx 0 0 20rpx;
				height: 260rpx;
				view {
					display: flex;
					padding-top: 10rpx;
					image {
						width: 140rpx;
						height: 140rpx;
					}
					image:first-child {
						margin-right: 30rpx;
					}
				}
				text:nth-of-type(1) {
					font-family: SourceHanSansCN-Medium;
					font-size: 28.35rpx;
					color: #1a1a1a;
					font-weight: 600;
				}
				text:nth-of-type(2) {
					font-family: SourceHanSansCN-Medium;
					font-size: 24.5rpx;
					color: #7e7e7e;
					padding-top: 10rpx;
				}
			}
			.sale-left-center,.sale-left-bottom {
				height: 162rpx;
				border-bottom: 1rpx solid #e6e6e6;
				display: flex;
				/* align-items: center; */
				padding: 20rpx 0 0 20rpx;
				view:first-child {
					text:first-child {
						font-size: 28.46rpx;
						color: #1a1a1a;
						display: flex;
						flex-direction: column;
						font-weight: 600;
					}
					text:last-child {
						font-size: 24.5rpx;
						color: #7e7e7e;
					}
				}
				view:last-child {
					image {
						width: 140rpx;
						height: 140rpx;
					}
				}
			}
			.sale-left-bottom {
				border-bottom: none;
				.milk {
					margin-left: 36rpx;
				}
			}
		}
		.sale-right {
			border-right: none;
		}
	}
	.scroll-con {
		margin: 40rpx 0 40rpx 26rpx;
		.banner-img {
			width: 698rpx;
			height: 372rpx;
			border-radius: 10rpx;
			margin-bottom: 18rpx;
		}
		.scroll-con-goods {
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			.scroll-goods {
				width: 220rpx;
				height: 362rpx;
				background-color: #fdfdfd;
				border-radius: 10rpx;
				border: 1rpx solid #e4e4e4;
				display: inline-block;
				margin-right: 12rpx;
				.scroll-goods-info {
					image {
						width: 100%;
						height: 220rpx;
						border-radius: 10rpx 10rpx 0 0;
					}
					.goods-title {
						font-size: 24rpx;
						padding: 0 13rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						white-space: normal;
						margin-bottom: 20rpx;
					}
					.price {
						display: flex;
						align-items: center;
						justify-content: space-between;
						text {
							font-family: PingFangSC-Medium;
							font-size: 24rpx;
							color: #e00b2c;
							padding-left: 14rpx;
							font-weight: bold;
						}
						.iconfont {
							font-size: 24rpx;
							margin-right: 18rpx;
						}
					}
				}
				
			}
		}
	}
	.recommend-container {
		.recommend-title {
			font-family: PingFangSC-Medium;
			font-size: 30rpx;
			color: #1a1a1a;
			font-weight: bold;
			padding: 0 0 23rpx 35rpx;
		}
		.recommend-list {
			background-color: #f4f4f4;
			padding: 18rpx 30rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.recommend-item {
				width: 334rpx;
				// height: 484rpx;
				background-color: #fff;
				margin-bottom: 18rpx;
				border-radius: 10rpx;
				padding: 8rpx 8rpx 18rpx;
				image {
					width: 100%;
					height: 316rpx;
				}
				.recommend-info {
					display: flex;
					position: relative;
					image {
						width: 28rpx;
						height: 28rpx;
						position: absolute;
						left: 12rpx;
						top: 0;
					}
					text {
						font-size: 24rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp:2;
						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						text-indent: 2em;
						padding-left: 10rpx;
						padding-right: 10rpx;
						color: #262626;
						letter-spacing: 1rpx; 
					}
				}
				.recommend-name {
					display: block;
					width: 60rpx;
					height: 30rpx;
					line-height: 22rpx;
					text-align: center;
					border: 1px solid #b28850;
					color: #b28850;
					font-size: 18rpx;
					border-radius: 4rpx;
					margin: 10rpx 0 8rpx 10rpx;
				}
				.recommend-price {
					font-family: SourceHanSansCN-Regular;
					display: flex;
					align-items: center;
					margin-left: 10rpx;
					text:nth-child(1) {
						color: #e0092c;
						font-size: 30rpx;
						font-weight: bold;
					}
					text:nth-child(2) {
						color: #C0C0C0;
						font-size: 24rpx;
						padding-left: 15rpx;
						text-decoration: line-through;
					}
				}
				
			}
			
		}
	}
</style>
